@live-wrapper-height:                 500px;
@live-infos-width:                    150px;
@live-coments-width:                  330px;
@navtab-height:                       69px;
.live-wrapper{
    position: relative;
    border: 1px solid #E4E4E4;
    // height:@live-wrapper-height;
    .player-wrapper{
        margin-left:@live-infos-width;

    }

    .live-infos{
        position: absolute;
        width:@live-infos-width;
        top:0;
        left:0;
        z-index: 97;

        ul{
            list-style: none;
        }

        .nav-tabs-wrapper{
            position: absolute;
            width:@live-wrapper-height;
            //  it relate with height of live-infos.
            margin-top: (@live-wrapper-height - @navtab-height)/2;
            margin-right: 0;
            margin-bottom:0;
            right: -(@navtab-height/2+5);
        }
        .nav-tabs > li {
            float:right;
            a{
                width: 125px;
                text-align: center;
            }
        }
        .tools-inline {
            position: absolute;
        }
        .live-btn-group{
            margin: 0;
            li{
                width:203px;
            }

        }
    }


    .live-coments{
        position: absolute;
        top:0;
        z-index: 86;
        right:0;
        width:@live-coments-width;

        .nav-tabs-wrapper{
            position: absolute;
            zoom:1;
            overflow: hidden;
            width:@live-wrapper-height;
            left: @navtab-height+8;
            margin-left: 0;
            top: (@live-wrapper-height)/2;
            margin-bottom: 0;
        }
        .comment_list{
            height:248px;
            overflow:auto;
            overflow-x:hidden;
        }

    }



    .live-player{
        position: relative;
        z-index: 87;
    }
    .sider-left{
        width:@live-infos-width;
        height:@live-wrapper-height;
        background:#fcfcfc;
    }

    .sider-right{
        height:@live-wrapper-height;
        width:@live-coments-width;
        overflow: hidden;
        background:#fcfcfc;
    }

}
// @media (max-width: 768px){
//     .live-wrapper{
//         height: auto;
//         .tabs-left > .nav-tabs{
//             float:none;
//         }
//         .live-infos{
//             position: relative;
//             width:50%;
//             .live-wrapper .sider-left{
//                 width:100%;
//             }
//             .nav-tabs-wrapper{
//                 position: relative;
//                 width:100%;
//                 margin:0;
//             }
//         }
//         .live-coments{
//             position: absolute;
//             width:50%;
//             .live-wrapper .sider-right{
//                 width:100%;
//             }
//             .nav-tabs-wrapper{
//                  position: relative;
//                 margin:0;
//                 width:100%;
//             }
//         }
//         .player-wrapper{
//             width: 700px;
//             margin: 0 auto;
//         }
//         .togglePlayerBtn{
//             // display: none;
//         }
//     }

// }

// @media (min-width: 768px) and (max-width: 979px) {
//     .live-wrapper{
//         width: 700px;
//         margin: 0 auto;
//         .live-infos{
//             position: absolute;
//         }
//         .live-coments{
//             position: absolute;
//         }
//         .player-wrapper{
//             width: 700px;
//             margin: 0 auto;
//         }
//     }
// }

// @media (min-width: 979px) and  (max-width: 1200px)  {
    .live-wrapper{
        .live-infos{
            position: absolute;
        }
        .live-coments{
            position: absolute;
        }
        .player-wrapper{
            margin-left: 0;
        }
    }
// }
// @media (min-width: 1200px)  {
//     .live-wrapper{
//         .live-infos{
//             position: absolute;
//         }
//         .live-coments{
//             position: absolute;
//         }
//         .player-wrapper{
//             margin-left: 0;
//         }
//     }
// }
.live-lists {
    overflow-x: hidden;
    overflow-y: auto;
    height: @live-wrapper-height;
    a.accordion-toggle {
        background: #FCFCFC;
        &:hover {
            background: #e7e7e7;
            text-decoration: none;
        }
    }
    .accordion-inner {
        min-height: 200px;
        overflow: hidden;
    }
}

.shipinxinxi-icon {
    .sprite(@shipinxinxi_icon);
    &:hover {
        .sprite(@shipinxinxi_active_icon);
    }
}

.jiaoxuehuanjie-icon {
    .sprite(@jiaoxuehuanjie_icon);
    &:hover {
        .sprite(@jiaoxuehuanjie_active_icon);
    }
}

.zhishidian-icon {
    .sprite(@zhishidian_icon);
    &:hover {
        .sprite(@zhishidian_active_icon);
    }
}
.st-analyze-icon{
    width:24px;
    height: 24px;
    vertical-align: bottom;
    background: url('../../images/analyze_icon.png') no-repeat center center;
}
li.active .st-analyze-icon,li:hover .st-analyze-icon{
    background-image: url('../../images/analyze_active_icon.png');
}

.nav-sidetabs .nav-tabs > li {
    float: left;
}

.nav-sidetabs .nav-tabs > li > a,
.nav-sidetabs .nav-tabs > li.active > a {
    border-color: transparent;
    .ico {
        display: inline-block;
        .ie7-inline-block();
        position: relative;
    }
}

.nav-sidetabs .nav-tabs > li > a:hover,
.nav-sidetabs .nav-tabs > li.active > a,
.nav-sidetabs .nav-tabs > li.active > a:hover {
    background: transparent;
    color: #fcfcfc;
    .shipinxinxi-icon {
        .sprite(@shipinxinxi_active_icon);
    }
    .jiaoxuehuanjie-icon {
        .sprite(@jiaoxuehuanjie_active_icon);
    }
    .zhishidian-icon {
        .sprite(@zhishidian_active_icon);
    }
    .ico {
        display: inline-block;
        .ie7-inline-block();
        position: relative;
    }
}

.nav-sidetabs .nav-tabs > li > a.togglePlayer {
    width: 30px;
    min-width: 30px;
    text-align: center;
}

#onlineUsers,
#attachments,
#livePlayInfos {
    height: @live-wrapper-height;
    overflow: auto;
    overflow-x: hidden;
}

.togglePlayer {
    position: absolute;
    width: 10px;
    height: @live-wrapper-height;
    line-height: @live-wrapper-height;
    vertical-align: middle;
    background: @grayDarker;
    color: @black;
    &:hover {
        background: @gray;
        color: @white;
        text-decoration: none;
    }
}

.live-infos {
    .togglePlayer {
        left: -10px;
    }
}

.live-coments {
    .togglePlayer {
        right: -10px;
    }
}

.online-panel {
    .playerWidget2 {
        width: 1192px;
        height: 670px;
    }
    .video-player {
        .error-404page .error-message {
            width: 1192px!important;
            height: 670px!important;
        }
    }
    .player-wrapper {
        height: 670px!important;
    }
}

.loading {
    text-align: center;
    padding-top: 14%;
    p {
        padding-top: 50px;
        font-size: 30px;
    }
}

.video-infos p {
    height: 25px;
    line-height: 25px;
    margin-right: 230px;
    overflow: hidden;
    
}

.video-share{
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 100%;
}
.ava-share-box {
    
    .bdsharebuttonbox,
    .qrcodebox,
    .filedownload {
        float: right;
    }
    .bdsharebuttonbox::after {
        display: none!important;
    }
    .clickToShare {
        display: inline-block;
        margin: 6px;
        color: #ddd;
        background-image: none;
    }
    .qrcodebox {
        position: relative;
        width: 84px;
        text-align: center;
        .title{
            text-align: left;
            padding-left: 20px;
        }
        .qrcode {
            margin: 10px 0;
            table {
                margin: auto;
                font-size: 0;
                td{
                    padding: 0;
                }
            } 
        }
        .qrcodeSharebox iframe ,.qrcodeShare{
            top: 50%;
            margin-top: -120px;
            left: 50%;
            margin-left: -111px;
            width: 222px;
            height: 257px;
            background-color: #fff;
            position: fixed;
            z-index: 1000;
            border: 1px solid #ddd;
        } 
        
    } 
    .clickToDownload {
        display: inline-block;
        margin: 6px;
        color: #ddd;
        text-indent: 16px;
        background:url('./../../images/download.png') no-repeat 0 center;
    }
    .hideshare {
        font-size: 16px;
        color: #222;
    }
} 
.error-submitPassword{
    width: 400px;
    margin: auto;
    padding-top: 225px;
    .onlinePassword{
        height: 40px;
        width: 100%;
        background-color: #222;
        border: 1px solid #444444;
        outline: none;
        padding: 0;
        border-radius: 2px;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .submitPassword{
        height: 40px;
        width: 100%;
        border: 0;
        background-color: #3B8EEA;
        color: #fff;
    }
    .errorMessage{
        margin: 10px 0;
        color: red;
    }
}
